<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ajax_post请求</title>
	</head>
	<body>
		<h2>该页面练习：原生ajax-post请求-携带参数</h2>
		<button onclick="sum()">求和</button>

		<script type="text/javascript" >
			function sum(){
				//创建xhr
				const xhr = new XMLHttpRequest()
				//绑定监听
				xhr.onreadystatechange = ()=>{
					if(xhr.readyState === 4){
						if(xhr.status >= 200 && xhr.status <= 299){
							console.log(xhr.response)
						}
					}
				}
				
				//指定发送请求的：方式、地址、query参数(urlencoded)
				// xhr.open('POST','http://127.0.0.1:5000/increment?n1=1&n2=99')

				//指定发送请求的：方式、地址、params参数
				// xhr.open('POST','http://127.0.0.1:5000/increment/1/99')

				//指定发送请求的：方式、地址、请求体参数
				xhr.open('POST','http://127.0.0.1:5000/increment')
				
				//设置一个请求头，告知服务器参数的编码形式
				// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
				// xhr.setRequestHeader('demo',123)
				//发送该请求,send中传入的参数，最终都会被xhr自动放入请求体中
				// xhr.send('n1=1&n2=99')

				//设置一个请求头，告知服务器参数的编码形式
				xhr.setRequestHeader('Content-Type','application/json')
				//发送该请求,send中传入的参数，最终都会被xhr自动放入请求体中
				xhr.send('{"n1":1,"n2":80}')

			}
		</script>
	</body>
</html>